
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>WebSocket</title>
    <script type="text/javascript" charset="utf-8">
        var wsServer = 'ws://192.168.0.114:8080';
        var ws=null;
        var tmsg = '';
        var getMsgTime = 0;
        function connect(){
            ws = new WebSocket(wsServer);
            //连接成功时触发
            ws.onopen = function (){
                console.log("open");
                alert("连接成功!!");
            };

            //获得返回信息时触发
            ws.onmessage = function (evt){
                console.log(evt);
                var js = JSON.parse(evt.data)
                if(js.type == 'text'){
                    var msg = JSON.parse(js.msg);
                    alert(msg.text);
                }else if(js.type == 'num'){
                    console.log(js.msg);
                }else if(js.type == 'heartbeat'){
                    alert(1);
                    heartBeatData = 'h';
                    ws.send(heartBeatData);
                }
            };
            //当连接断开时触发
            ws.onclose = function (evt)
            {
                alert('连接已断开');
                console.log("WebSocketClosed!");
            };
            //当连接出错时触发
            ws.onerror = function (evt)
            {
                console.log("WebSocketError!");
            };
        };

        function send(){
            var inte = document.getElementById( "pp" );
            var str = inte.value;
            if( str.length > 110 ){
                var strarr = [];
                //已截取字符长度
                var offset = 0;
                //每次截取字符长度
                var length = 109;
                var i = 0;

                while( true ){
                    //截取字符
                    strarr[i] = str.substr( offset , length );
                    //获取已截取字符长度
                    offset += length;
                    if( ( str.length - offset ) >= 109 ){
                        length = 110;
                    }else{
                        //当未被截取的字符长度少于109时，获取剩余长度
                        length = str.length - offset;
                    }
                    if(length == 0){
                        break;
                    }
                    i++;
                }
                for( var j=0 ; j<strarr.length ; j++ ){
                    ws.send( strarr[j] );
                }
            }else{
                ws.send(str);
            }
        };
        function get(){

        };
    </script>
</head>
<body>
<div>

    <textarea id="tasddf" name="texar" style=" width: 600px;height: 500px;overflow: scroll; margin-top: 100px; ">
    </textarea>
    <input  type="text" id="pp" name="input" value="" style="margin-top: 50px;width: 300px;height: 60px;font-size: 20px;" >
    <button id="bt" style="width: 100px;height: 50px;margin-top: 50px;" onclick="connect()">连接</button>
    <button id="bt2" style="width: 100px;height: 50px;margin-top: 50px;" onclick="send()">发送</button>
</div>
</body>
</html>